<template>
	<view class="">
		<view class="container">
			<view class="list">
				<view class="item">
					<view class="t">
						选择类型
					</view>
					<view class="b1 u-flex u-col-center u-row-between">
						<view class="i" :class="{on:params.type==1}" @click="changeType(1)">
							我要收购
						</view>
						<view class="i" :class="{on:params.type==2}" @click="changeType(2)">
							我要出售
						</view>
					</view>
				</view>
				<view class="item">
					<view class="t">
						道具名称
					</view>
					<view class="b">
						<textarea type="text" v-model="params.name" placeholder="请输入"
							:disabled="objdata.from=='up'&&objdata.status_up==3 &&objdata.status==3"
							placeholder-style="color:#D1CDCD;font-size: 28rpx;"></textarea>
					</view>
				</view>
				<view class="item">
					<view class="t">
						价格<text>(MHB)</text>
					</view>
					<view class="b">
						<input :disabled="objdata.from=='up'&&objdata.status_up==3 &&objdata.status==3" type="number"
							v-model="params.price" placeholder="请输入" maxlength="9"
							placeholder-style="color:#D1CDCD;font-size: 28rpx;font-weight: 400;" class="nn" />
						<view class="big" v-if="getBig(params.price)">
							{{getBig(params.price)}}
						</view>
					</view>
				</view>
				<view class="item">
					<view class="t">
						图片
					</view>
					<view class="img" v-if="params.image" @click="upload">
						<image :src="params.image" mode="aspectFill" class="i1">
						</image>
						<image @click.stop="params.image=''" src="@/static/del.png" mode="aspectFill" class="i3"
							v-if="params.image && objdata.from!='up'">
						</image>
					</view>
					<view class="img" v-else @click="upload">
						<image src="@/static/up2.png" mode="aspectFill" class="i2"></image>
					</view>
				</view>
				<view class="item">
					<view class="t">
						上架天数 {{params.upday}}
					</view>
					<view class="b3">
						<slider :disabled="objdata.from == 'edit'&&objdata.status_up!=3 && objdata.status != 4" :min="1"
							:max="30" @change="sliderChange" step="1" activeColor="#FF6F07" backgroundColor="#D1D1D6"
							block-color="#fff" block-size="10" :value="params.upday" />
						<view class="i i1">
							1
						</view>
						<view class="i i2" :style="{left:left+'%'}">
							{{params.upday}}
						</view>
						<view class="i i3">
							30
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer_btn" @click="gopage()">
			<view class="cont">
				<view class="btn">
					下一步
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		infoQuotationList
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				left: 3,
				params: {
					image: "",
					name: '',
					price: '',
					type: '',
					upday: 1,
				},
				objdata: {}
			}
		},
		onLoad(option) {
			// 修改报价页面
			this.objdata = JSON.parse(decodeURIComponent(option.obj))
			if (this.objdata.from == 'up') {
				uni.setNavigationBarTitle({
					title: '重新上架'
				})
			}
			this.getInfo()
		},
		computed: {
			getBig() {
				return (data) => {
					if (data) {
						return numberToChinese(data)
					} else {
						return ''
					}

					function numberToChinese(num) {
						// 限制范围：0到999999999
						if (num < 0 || num > 999999999) return '超出范围';

						// 定义中文数字和单位
						const digits = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
						const units = ['', '十', '百', '千']; // 个级单位
						const bigUnits = ['', '万', '亿']; // 大单位：个、万、亿

						// 处理0的情况
						if (num === 0) {
							return '零两整';
						}

						// 转换为整数并补零到9位（亿级1位+万级4位+个级4位）
						const str = Math.floor(num).toString().padStart(9, '0');
						// 拆分三级：亿级(0-0)、万级(1-4)、个级(5-8)
						const levels = [
							str.slice(0, 1), // 亿级
							str.slice(1, 5), // 万级
							str.slice(5, 9) // 个级
						];

						let result = '';

						// 处理每一级
						levels.forEach((level, index) => {
							if (level === '0000' && index !== 0) return; // 跳过空的万级和个级

							let levelStr = '';
							// 处理当前级的每一位
							for (let i = 0; i < level.length; i++) {
								const digit = parseInt(level[i]);
								if (digit !== 0) {
									levelStr += digits[digit] + units[level.length - 1 - i];
								} else {
									// 只在非末尾且前一位不是零的情况下加零
									if (i !== level.length - 1 && levelStr[levelStr.length - 1] !== '零') {
										levelStr += '零';
									}
								}
							}

							// 去除当前级末尾的零
							levelStr = levelStr.replace(/零+$/, '');

							// 如果当前级有内容，添加对应的大单位（万、亿）
							if (levelStr) {
								result += levelStr + bigUnits[2 - index];
							}
						});

						// 处理连续的零
						result = result.replace(/零+/g, '零');
						// 去除可能的开头或结尾零
						result = result.replace(/^零+|零+$/g, '');

						// 添加金额单位
						return result + '两整';
					}

				}
			}
		},
		methods: {
			getInfo() {
				infoQuotationList(this.objdata.id).then(res => {
					if (res.code == 200) {
						this.params.id = res.data.id
						this.params.type = res.data.type
						this.params.name = res.data.name
						this.params.price = res.data.price
						this.params.image = res.data.image
						this.params.upday = res.data.last.upday
						this.left = this.params.upday / 30 * 100
					}
				})
			},
			upload() {
				if (this.objdata.from == 'up' && this.objdata.status_up == 3 && this.objdata.status == 3) {
					this.$modal.msg('不可修改')
					return
				}
				this.$uploadone().then(res => {
					this.params.image = res
				})
			},
			gopage(url) {
				if (!this.params.name) {
					this.$modal.msg('请输入道具名称')
					return
				}
				if (!this.params.price) {
					this.$modal.msg('请输入价格')
					return
				}
				if (!this.params.upday) {
					this.$modal.msg('请选择天数')
					return
				}
				if (this.objdata.from == 'up') {
					let obj = Object.assign(this.objdata, this.params)
					uni.navigateTo({
						url: '/pages/user/order/yesorder?obj=' + encodeURIComponent(JSON.stringify(obj))
					})
				} else {
					let obj = Object.assign(this.objdata, this.params)
					uni.navigateTo({
						url: '/pages/user/order/yesorder?obj=' + encodeURIComponent(JSON.stringify(obj))
					})
				}
			},
			changeType(i) {
				if (this.objdata.from == 'up' && this.objdata.status_up == 3 && this.objdata.status == 3) {
					this.$modal.msg('不可修改')
					return
				}
				this.params.type = i
			},
			sliderChange(e) {
				this.params.upday = e.detail.value
				this.left = this.params.upday / 30 * 100
			},
		}
	}
</script>

<style lang="scss" scoped>
	$color: #FF6F07;

	.container {
		padding: 20rpx 30rpx;

		.on {
			opacity: 1;
		}

		.list {
			padding-bottom: 200rpx;

			.item {
				background-color: #fff;
				border-radius: 20rpx;
				padding: 20rpx 30rpx;
				margin-bottom: 20rpx;
				position: relative;

				.s-list {
					position: absolute;
					left: 2rpx;
					right: 2rpx;
					top: 140rpx;
					background-color: #fff;
					border-radius: 0 0 20rpx 20rpx;
					box-shadow: 0rpx 2rpx 2rpx 0rpx rgba(0, 0, 0, 0.25);
					z-index: 999;
					border: 2rpx solid #f4f4f4;
					padding: 0 30rpx;

					.i {
						height: 60rpx;
						line-height: 60rpx;
						font-size: 28rpx;
						color: #979797;

					}
				}

				.b3 {
					margin-top: 20rpx;
					position: relative;
					padding-bottom: 30rpx;

					&::after {
						content: '';
						position: absolute;
						left: 50%;
						top: 8rpx;
						width: 4rpx;
						height: 20rpx;
						margin-left: -10rpx;
						background-color: $color;
					}

					.i {
						color: #11192D;
						font-size: 28rpx;
					}

					.i1 {
						position: absolute;
						left: 0;
						top: 0;

						&::after {
							content: '';
							position: absolute;
							left: 30rpx;
							top: 8rpx;
							width: 4rpx;
							height: 20rpx;
							background-color: $color;
						}


					}

					.i2 {
						position: absolute;
						// right: 0;
						top: 45rpx;
						margin-left: -20rpx;
					}

					.i3 {
						position: absolute;
						right: -10rpx;
						top: 0;

						&::after {
							content: '';
							position: absolute;
							right: 40rpx;
							top: 8rpx;
							width: 4rpx;
							height: 20rpx;
							background-color: $color;
						}
					}

				}

				.t {
					font-size: 32rpx;
					color: #11192D;
					height: 50rpx;
					line-height: 50rpx;

					text {
						font-size: 20rpx;
					}
				}

				.img {
					margin-top: 20rpx;
					width: 120rpx;
					height: 120rpx;
					border-radius: 16rpx;
					border: 2rpx solid #D1CDCD;
					display: flex;
					align-items: center;
					justify-content: center;
					text-align: center;
					position: relative;

					.i1 {
						width: 100%;
						height: 100%;
						border-radius: 16rpx;
						overflow: hidden;
					}

					.i2 {
						width: 48rpx;
						height: 48rpx
					}

					.i3 {
						position: absolute;
						top: -15rpx;
						right: -15rpx;
						width: 30rpx;
						height: 30rpx;
					}

				}

				.b1 {
					margin-top: 20rpx;

					.i {
						width: 300rpx;
						height: 80rpx;
						line-height: 80rpx;
						text-align: center;
						background: #F9F9F9;
						border-radius: 12rpx;
						color: #D1CDCD;
						font-size: 28rpx;
						border: 1px solid #F9F9F9;
					}

					.on {
						background: #FFF2E9;
						border: 1px solid $color;
						color: $color;
					}
				}

				.b {
					margin-top: 20rpx;

					input {
						width: 100%;
						height: 60rpx;
						line-height: 60rpx;
						color: #11192D;
						font-size: 28rpx;
					}

					textarea {
						width: 100%;
						height: 80rpx;
						line-height: 40rpx;
						color: #11192D;
						font-size: 28rpx;
					}

					.nn {
						font-family: "DINB";
						font-size: 36rpx;
						font-weight: 600;
					}

					.big {
						line-height: 28rpx;
						height: 28rpx;
						font-weight: 500;
						font-size: 20rpx;
						color: #979797;
						text-align: left;

					}
				}
			}
		}
	}
</style>